<template>
  <div class="salary-container">
    <el-tabs v-if="roleReady" v-model="activeTab" type="card" @tab-click="handleTabClick">
      <el-tab-pane v-if="!isEmployee" label="薪资方案" name="schemes">
        <SalarySchemes v-if="activeTab === 'schemes'" />
      </el-tab-pane>
      <el-tab-pane label="薪资记录" name="records">
        <SalaryRecords v-if="activeTab === 'records' || isEmployee" />
      </el-tab-pane>
      <el-tab-pane v-if="!isEmployee" label="薪资统计" name="statistics">
        <SalaryStatistics v-if="activeTab === 'statistics'" />
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import SalarySchemes from './components/SalarySchemes.vue'
import SalaryRecords from './components/SalaryRecords.vue'
import SalaryStatistics from './components/SalaryStatistics.vue'
import axios from 'axios'

const activeTab = ref('records')
const isEmployee = ref(false)
const roleReady = ref(false)

onMounted(async () => {
  try {
    const res = await axios.get('/user/info')
    console.log('用户信息:', res.data)
    const role = (res.data && res.data.role) ? res.data.role.toString().toUpperCase().trim() : ''
    isEmployee.value = ['EMPLOYEE', 'USER', '普通员工'].includes(role)
  } catch (e) {
    console.error('获取用户信息失败', e)
  }
  roleReady.value = true
})

const handleTabClick = (tab) => {
  console.log('切换到标签页:', tab.props.name)
}
</script>

<style scoped>
.salary-container {
  padding: 20px;
  background-color: #f5f7fa;
  min-height: calc(100vh - 60px);
}

:deep(.el-tabs__content) {
  padding: 20px 0;
}
</style> 